<template>
  <div>
    <!-- 活动卡片 -->
    <div class="activity-del-card">
      <div class="nothing" v-if="actList.length === 0">暂无数据</div>
      <transition-group name="list">
        <div class="card-item list-item" 
          v-for="(val, key) in actList" :key="val.id" 
          @click="routerToDetail(val.id)"
          :class="{'is-new': val.is_new}" 
          >
          <div class="card-header">
            <img :src="val.bank_img">
            <span class="title">{{val.name}}</span>
            <!-- <span class="v-line"></span> -->
            <!-- <span class="title">{{val.card_no}}</span> -->
          </div>
          <div class="card-content">
            <div class="desc">({{val.begin_date}} - {{val.end_date}})</div>
            <div class="hint">{{val.brief_introduction}}</div>
          </div>
          <div class="card-footer">
            <div class="flex-item">
            </div>
            <div class="flex-item">
              <img src="/src/assets/icons/restore.png" alt="恢复" class="ml-12" @click.stop="removeHate(val.id, key)">
            </div>
          </div>
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'Mint-ui'

  export default {
    name: 'ActivityDel',
    data () {
      return {
        // 活动卡片
        actList: []
      }
    },
    methods: {
      getActList () {
        this.$post('/vue/activity/my_hate_list').then(data => {
          this.actList = data
        })
      },
      routerToDetail (id) {
        this.$router.push({name: 'ActivityDetail', params: {id: id}})
      },
      removeHate (id, index) {
        let params = {act_id: id}
        this.$post('/vue/activity/remove_hate', params).then(data => {
          msg('恢复成功')
          this.actList.splice(index, 1)
        })
      }
    },
    mounted () {
      this.getActList()
    },
    updated () {
    }
  }
  const msg = (msg) => {
    Toast({
      message: msg,
      position: 'bottom',
      duration: 2000
    })
  }
</script>

<style lang="less">
  @c-226: rgb(226, 226, 226);
  @c-124: rgb(124, 124, 124);
  @c-169: rgb(169, 169, 169);
  @c-235: rgb(235, 235, 235);
  @c-blue: rgb(108, 184, 222);
  /* ---卡片样式--- */
  .activity-del-card {
    height: 100vh;
    background-color: #FFF;
    text-align: left;
    overflow-x: hidden;
    overflow-y: scroll;
    position: relative;
    .nothing {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 0;
      text-align: center;
      font-size: 12px;
      line-height: 24px;
      color: @c-124;
    }
    .card-item {
      margin-top: 8px;
      padding: 12px;
      position: relative;
      box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
      &.is-new {
        background-image: url('/src/assets/icons/label-red.png');
        background-repeat: no-repeat;
        background-size: 24px 24px;
        background-position: left top;
      }
      .card-header {
        color: @c-124;
        font-size: 0;
        &::after {
          position: absolute;
          top: 0;
          right: 0;
          left: 0;
          height: 1px;
          content: '';
          transform: scaleY(.5);
          background-color: #f3f3f3;
        }
        img {
          width: 24px;
          height: 24px;
          margin-right: 4px;
          vertical-align: middle;
        }
        .title {
          display: inline-block;
          vertical-align: middle;
          font-weight: bold;
          font-size: 13px;
          line-height: 24px;
        }
        .v-line {
          width: 1px;
          height: 20px;
          background-color: @c-226;
          display: inline-block;
          vertical-align: middle;
          margin: 0 8px;
        }
      }
      .card-content {
        padding: 8px 0;
        font-size: 12px;
        line-height: 24px;
        color: @c-169;
        border-bottom: 1px solid @c-235;
        .desc {}
        .hint {
          color: rgb(217, 117, 99);
        }
      }
      .card-footer {
        padding-top: 8px;
        display: flex;
        align-items: center;
        align-content: flex-start;
        justify-content: space-between;
        font-size: 0;
        &::before {
          &:extend(.activity .activity-card .card-item .card-header::after);
        }
        .flex-item {
          flex: 0 0 auto;
        }
        img {
          width: 24px;
          height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
        span {
          font-size: 12px;
          line-height: 24px;
          color: @c-169;
          display: inline-block;
          vertical-align: middle;
        }
        .ml-12 {
          margin-left: 12px;
        }
      }
    }
  }
  .list-enter-active, .list-leave-active {
    transition: all 1s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateX(30px);
  }
  .loading-background, .mint-loadmore-top span {
    -webkit-transition: .2s linear;
    transition: .2s linear;
  }
  .mint-loadmore-top span {
    display: inline-block;
    vertical-align: middle;
    &.is-rotate {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  .page-loadmore .mint-spinner {
    display: inline-block;
    vertical-align: middle;
  }
  .page-loadmore-desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px;
  }
  .page-loadmore-desc:last-of-type,
  .page-loadmore-listitem {
    border-bottom: 1px solid #eee;
  }
  .page-loadmore-listitem {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  .page-loadmore-listitem:first-child {
    border-top: 1px solid #eee;
  }
  .page-loadmore-wrapper {
    overflow: scroll;
  }
  .mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle;
    &.is-rotate {
      -webkit-transform: rotate(180deg);
      transform: rotate(180deg);
    }
  }
  .mint-loadmore-top, .mint-loadmore-bottom {
    color: #a9a9a9;
  }
  .mint-msgbox-btn.blue {
    color: #26a2ff;
  }
</style>